import React from "react";
import ReactDom from "react-dom";
import "./index.css";
function Count(props) {
  // let count = 1;
  // setInterval(() => {
  //   count++;
  // }, 1000);
  return <div className="count">{props.count}</div>;
}

// 只要setState就会执行当前组件render方法,其实不完全准确（生命周期函数）
// props的组件 状态变化是由props的变化引起的,只要props不发生变化,组件就不会进行更新

// setState会引起有状态class组件,render方法的执行
// render方法的执行,不一定会影响无状态组件的更新,无状态组件只看自己的props有没有变化
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    setInterval(() => {
      this.setState({
        count: 8,
      });
      console.log("state");
    }, 1000);
  }
  render() {
    const { count } = this.state;
    const { name } = this.props;
    console.log("render");
    return (
      <h1>
        <Count count={count} />
        {name}
      </h1>
    );
  }
}

ReactDom.render(<App name="我是props1" />, document.getElementById("root"));
